<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../animate.css">
    <title>作业</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        ul {
            list-style: none;
        }

        #header {
            background-color: #00a3c8;
            width: 100vw;
        }

        .box1 {
            width: 1200px;
            margin: 0 auto;
        }

        .left {
            margin-left: 10px;
        }

        #header .left div {

            display: inline-block;
            font-size: 14px;
            color: #fff;
        }

        div span {
            font-family: '微软雅黑';
            line-height: 30px;
            margin: 0 8px;
        }

        #site img {
            width: 13px;

        }

        .third-party {
            display: inline-block;
        }

        #full_content .box1 img {
            width: 60px;
        }

        #name {
            height: 60px;
            padding-bottom: 15px;
            text-align: center;
            display: inline-block;
        }

        #full_content .box1 .logo {
            display: inline-block;
        }

        /* #name .name-box:nth-of-type(1){
            margin-bottom: 5px;
        } */
        #full_content .box1 ul {
            padding: 0;
            float: right;
            /* display: inline-block; */
            margin-top: 30px;
        }

        #full_content .box1 ul li {
            display: inline-block;
            padding: 0 15px;
            border-right: 1px solid #aaa;
            font-size: 17px;
        }

        #text {
            float: right;
            width: 200px;
            height: 35px;
            line-height: 40px;
            margin-left: 10px;
            border: 0;
            background-image: url("./imgs/fdj.jpg");
            background-size: 100%;
        }

        #text input {
            color: #aaa;
            height: 20px;
            border: 0;
            margin-top: 5px;
        }

        #container {
            padding: 49px;
        }

        #ani {
            width: 100%;
            min-width: 1200px;
            height: 500px;
            background-image: url("./imgs/wvtm.jpg");
            overflow: hidden;
        }

        #ani::after {
            content: "";
            display: block;
            clear: both;
        }

        .item {
            width: 10%;
            height: 100%;
            float: left;
            background-image: url("./imgs/1c53.jpg");
            background-size: 1000% 100%;
            background-repeat: no-repeat;
        }

        .item:nth-child(1) {
            background-position-x: 0%;
        }

        .item:nth-child(2) {
            background-position-x: 11%;
        }

        .item:nth-child(3) {
            background-position-x: 22%;
        }

        .item:nth-child(4) {
            background-position-x: 33%;
        }

        .item:nth-child(5) {
            background-position-x: 44%;
        }

        .item:nth-child(6) {
            background-position-x: 55%;
        }

        .item:nth-child(7) {
            background-position-x: 66%;
        }

        .item:nth-child(8) {
            background-position-x: 77%;
        }

        .item:nth-child(9) {
            background-position-x: 88%;
        }

        .item:nth-child(10) {
            background-position-x: 99%;
        }

        .slideDown {
            transform: translate(0, -100%);
            animation: slideDown 0.5s both;
        }

        @keyframes slideDown {
            from {
                transform: translate(0, -100%);
            }

            to {
                transform: translate(0, 0);
            }
        }

        .slideDown:nth-child(1) {
            animation-delay: 0s;
        }

        .slideDown:nth-child(2) {
            animation-delay: 0.05s;
        }

        .slideDown:nth-child(3) {
            animation-delay: 0.1s;
        }

        .slideDown:nth-child(4) {
            animation-delay: 0.15s;
        }

        .slideDown:nth-child(5) {
            animation-delay: 0.2s;
        }

        .slideDown:nth-child(6) {
            animation-delay: 0.25s;
        }

        .slideDown:nth-child(7) {
            animation-delay: 0.3s;
        }

        .slideDown:nth-child(8) {
            animation-delay: 0.35s;
        }

        .slideDown:nth-child(9) {
            animation-delay: 0.4s;
        }

        .slideDown:nth-child(10) {
            animation-delay: 0.45s;
        }

        .slideUp {
            transform: translate(0, 100%);
            animation: slideUp 0.5s both;
        }

        @keyframes slideUp {
            from {
                transform: translate(0, 100%);
            }

            to {
                transform: translate(0, 0);
            }
        }

        .slideUp:nth-child(1) {
            animation-delay: 0s;
        }

        .slideUp:nth-child(2) {
            animation-delay: 0.05s;
        }

        .slideUp:nth-child(3) {
            animation-delay: 0.1s;
        }

        .slideUp:nth-child(4) {
            animation-delay: 0.15s;
        }

        .slideUp:nth-child(5) {
            animation-delay: 0.2s;
        }

        .slideUp:nth-child(6) {
            animation-delay: 0.25s;
        }

        .slideUp:nth-child(7) {
            animation-delay: 0.3s;
        }

        .slideUp:nth-child(8) {
            animation-delay: 0.35s;
        }

        .slideUp:nth-child(9) {
            animation-delay: 0.4s;
        }

        .slideUp:nth-child(10) {
            animation-delay: 0.45s;
        }

        .slideFade:nth-child(2n+1) {
            transform: translate(0, -100%);
            animation: slideDown 0.5s both;
        }

        .slideFade:nth-child(2n) {
            opacity: 0;
            animation: slideFade 1.5s both;
        }

        @keyframes slideFade {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* #projectbox {
            border: 1px solid black;
        } */

        #project {
            width: 1200px;
            margin: 0 auto;
            /* border: 1px solid black; */
        }

        .underline {
            display: block;
        }

        .project-text {
            width: 30%;
            height: 160px;
            border: 5px solid;
            display: inline-block;
            border-color: rgb(203, 245, 255) rgb(203, 245, 255) rgb(84, 221, 255);
        }

        .project-text .text1 {
            margin-top: 45px;
        }

        .project-text .text2 {
            margin-top: 45px;
        }

        .project-text .text3 {
            margin-top: 22px;
        }

        .project-text div {
            font-size: 13px;
            line-height: 24px;
            /* margin: 50px 0; */
        }

        .project-img {
            width: 30%;
            height: 160px;
            display: inline-block;
        }

        .project-img {
            background-size: 100% 100%;
        }

        #Exhibition-box {
            width: 100%;
            height: 800px;
            /* background-color: red; */
        }

        #Exhibition-1 {
            width: 100%;
            height: 50%;
            background-image: url("./imgs/cp111.jpg");
        }

        #Exhibition-1-1 {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        #Exhibition-1-1-1 {
            width: 100%;
            height: 90px;
            /* background-color: green; */
        }

        #Exhibition-1-1-1 h1 {
            margin: 0;
            display: inline-block;
            margin-right: 15px;
            margin-top: 10px;
        }

        #Exhibition-1-1-1 span {
            line-height: 100%;
        }

        #Exhibition-1-1 table {
            margin-top: 8px;
            margin-left: -2px;

        }

        #Exhibition-1-1 td {
            width: 300px;
            height: 300px;
            padding: 40px;
        }

        #Exhibition-1-1 #Exhibition-1-1-2 {
            margin-top: -2px;
            margin-left: -2px;

        }

        #Exhibition-1-1 img {
            width: 100%;
            height: 100%;
        }

        #GD {
            position: relative;
        }

        #GD #bbb {
            width: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            border: 1px solid #fff;
            transform: translate(-50%, 0) rotate(-60deg);
        }

        #GD div:nth-child(2) {
            position: absolute;
            top: 43%;
            left: 30%;

        }

        #GD #www {
            width: 90px;
            height: 50px;
            background-color: #5fbb5d;

        }

        #GD button {
            width: 90px;
            height: 30px;
            border: 2px solid #fff;
            background-color: transparent;
            margin: 10px;
            color: #fff;
        }

        #about-us-box {
            width: 1200px;
            margin: 0 auto;
        }

        #about-us {
            display: flex;
            padding-top: 10px;
        }

        #about-us .about-us-img,
        #about-us .about-us-info {
            flex-basis: 580px;
        }

        #about-us .about-us-img {
            padding: 10px 0 0 50px;
        }

        #about-us .img-border {
            border: 1px solid #999;
            padding: 3px;
            display: inline-block;
            position: relative;
        }

        #about-us .img-border:nth-child(1) {
            top: -50px;
            left: 50px;
        }

        #about-us .img-bg {
            background-position: center center;
            background-size: cover;
        }

        #about-us .img-border:nth-child(1) div {
            background-image: url("./imgs/IMG_5045.jpg");
            width: 200px;
            height: 200px;
        }

        #about-us .img-border:nth-child(2) div {
            background-image: url("./imgs/IMG_5034.jpg");
            width: 300px;
            height: 300px;
        }

        #about-us .divider-line {
            flex-basis: 40px;
        }

        #about-us .divider-line div {
            margin: 0 auto;
            width: 0;
            height: 100%;
            border-left: 1px dashed black;
        }

        #about-us .about-us-info {
            position: relative;
        }

        #about-us .quan {
            position: absolute;
            left: -27px;
        }

        #about-us .quan div {
            display: inline-block;
            width: 300px;
            height: 0;
            border-top: 2px solid lightgray;
            transform: translate(-4px, -6px);
        }

        .title {
            text-align: center;
        }

        .feek-back-box {
            width: 100%;
            height: 320px;
            min-width: 1200px;
            background-size: 100% 100%;
            background-image: url('./imgs/negp.jpg');
        }

        .feek-back {
            width: 1200px;
            height: 320px;
            margin: auto;
            display: flex;
            justify-content: space-around;
        }

        .feek-back-img {
            width: 320px;
            height: 320px;
            overflow: hidden;
            background-image: url('./imgs/tv7o.jpg');
            background-position: center center;
            background-size: cover;
        }

        .forms {
            color: #fff;
            width: 620px;
        }

        #green-botton {
            background-color: yellowgreen;
            height: 40px;
            text-align: center;
            transition: all 0.5s;
        }

        #green-botton:hover {
            background-color: #00a3c8;
        }

        #news-box {
            width: 1200px;
            margin: 0 auto;
        }

        .news {
            display: flex;
            justify-content: space-around;
            width: 1200px;
        }

        .news div {
            text-align: left;
            width: 380px;
            height: 240px;
        }

        .news div img {
            width: 100%;
        }

        .news div p:nth-of-type(1) {
            font-size: 15px;
        }

        .news div p:nth-of-type(2) {
            font-size: 12px;
            color: #aaa;
        }

        #footer-content {
            width: 100%;
            height: 360px;
            min-width: 1200px;
            background-size: 100% 100%;
            background-image: url('./imgs/4x7e.jpg');
        }
        .bottom-box{
            margin: 0 auto;
            width: 1200px;
            display: flex;
            justify-content: space-around;
        }

        .bottom {
            color: #fff;
            margin: 25px 0;
            padding: 0 10px;
            height: 30px;
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .img-box{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .img-box .img{
            margin: 15px 0;
            width: 200px;
            height: 200px;
        }
        .img img{
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="header">
        <div class="box1">
            <div class="left" style="text-align: left;">
                <div id="site"><img src="./imgs/lv-yj(3).png" alt=""><span>广州市科学城开元大道188号E、F栋6层</span></div>
                <div id="postbox"><span>|</span><img src="./imgs/icon_emiel_8bg0.png"
                        alt=""><span>yichuanbio@163.com</span>
                </div>
                <div id="phone-number"><span>|</span><img src="./imgs/icon_tel_1idx.png"
                        alt=""><span>020-32039585</span>
                </div>
                <div style="float: right; margin-right:10px;">
                    <img src="./img/xl1.png" alt="" class=" third-party">
                    <img src="./img/tx1.png" alt="" class=" third-party">
                    <img src="./img/qq1.png" alt="" class=" third-party">
                    <img src="./img/wx1.png" alt="" class=" third-party">
                </div>
            </div>
        </div>
    </div>
    <div id="full_content">
        <div class="box1">
            <div class="logo"><img src="./imgs/logo.png" alt=""></div>
            <div id="name">
                <div class="name-box"><strong style="font-size: 28px;">伊川生物</strong></div>
                <div class="name-box"><span style="font-size: 12px; line-height: 18px;">YICHUAN&nbsp;BIOLOGICAL</span>
                </div>
            </div>
            <ul>
                <li>网站首页</li>
                <li>关于我们</li>
                <li>新闻资讯</li>
                <li>产品中心</li>
                <li>加盟合作</li>
                <li>人才招聘</li>
                <li id="text">
                    <input type="text" value="请输入关键字">
                </li>
            </ul>
        </div>
    </div>
    <div id="container">
        <div id="ani">
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
            <div class="item animated slideDown slideFade slideUp"></div>
        </div>
    </div>
    <div id="projectbox">
        <div id="project">
            <h1 style="text-align: center; color: #7c7c7c;">重点项目推荐
                <div class="underline"><img src="./imgs/fgx.png" alt=""></div>
            </h1>
            <div>
                <div class="project-text">
                    <div class="text1">※甘胆酸（CG）测定试剂盒&emsp;&emsp;&emsp;均相酶免疫法
                        ※单胺氧化酶（MAO）测定试剂盒&emsp;&emsp;谷氨酸脱氢酶法
                        ※胱氨酸蛋白酶抑制剂（CysC）测定试剂盒&emsp;胶乳免疫透射比浊法
                        ※视黄醇结合蛋白(RBP)测定试剂盒&emsp;&emsp;免疫透射比浊法</div>
                    <div>&emsp;</div>
                </div>
                <div class="project-img" style="background-image: url('./imgs/td-11_du0k.jpg');"></div>
                <div class="project-text">
                    <div class="text2">※缺血修饰白蛋白(IMA)测定试剂盒&emsp;&emsp;白蛋白-钴结合法<br>
                        ※血管紧张素转化酶(ACE )测定试剂盒&emsp;&emsp;FAPGG底物法<br>
                        ※同型半胱氨酸(HCY)测定试剂盒&emsp;酶循环法<br>
                        ※唾液酸（SA）测定试剂盒&emsp;&emsp;神经氨酸苷酶法</div>
                    <div>&emsp;</div>
                </div>
                <div class="project-img" style="background-image: url('./imgs/td-13.jpg');"></div>
                <div class="project-text">
                    <div class="text3">※载脂蛋白E(ApoE) 测定试剂盒&emsp;&emsp;免疫比浊法<br>
                        ※游离脂肪酸(NEFA)测定试剂盒&emsp;&emsp;ACS-ACOD法<br>
                        ※糖化血红蛋白(HbA1C)测定试剂盒&emsp;&emsp;胶乳免疫比浊法<br>
                        ※心脏型脂肪酸结合蛋白(h-FABP)测定试剂盒&nbsp;胶乳免疫比浊法</div>
                    <div>&emsp;</div>
                </div>
                <div class="project-img" style="background-image: url('./imgs/td-14.jpg');"></div>
            </div>
        </div>
    </div>
    <div id="Exhibition-box">
        <div id="Exhibition-1">
            <div id="Exhibition-1-1">
                <div id="Exhibition-1-1-1">
                    <h1 style=" color: #fff;">产品展示</h1>
                    <div style="width: 80px;border-top: 1px solid #fff;display: inline-block;margin-bottom: 10px;">
                    </div>
                    <span style=" color: #fff;">客户的需求就是伊川人永远工作的目标</span>
                    <p style="margin-top: 5px; color: #fff;">PRODUCT CENTER</p>
                </div>
                <table cellspacing="0">
                    <tr>
                        <td style="background-color: #6bdf77;">
                            <h2 style="margin: 0; color: #fff;">生化诊断试剂</h2>
                            <div style="width: 50px;border-top: 1px solid #fff;margin-top: 10px;"></div>
                            <p style="color: #fff;">体外诊断试剂是指按医疗器械管理的体外诊断试剂，包括可单独使用或与仪器、器具、设备或系统组合使用。</p>
                            <div
                                style="width: 100px;height: 40px;border:2px solid #fff;text-align: center;line-height: 40px;color: #fff;">
                                查看更多 +</div>
                        </td>

                        <td></td>
                        <td style="background-color: #ecf8fb;">
                            <h2 style="margin: 0; color: #666;">生化诊断试剂</h2>
                            <div style="width: 50px;border-top: 1px solid #666;margin-top: 10px;"></div>
                            <p style="color: #666;">体外诊断试剂是指按医疗器械管理的体外诊断试剂，包括可单独使用或与仪器、器具、设备或系统组合使用。</p>
                            <div
                                style="width: 100px;height: 40px;border:2px solid #666;text-align: center;line-height: 40px;color: #666;">
                                查看更多 +</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="Exhibition-2">
            <div id="Exhibition-1-1">
                <table cellspacing="0" id="Exhibition-1-1-2">
                    <tr>
                        <td style="padding: 0;">
                            <img src="./imgs/xvra.jpg" alt="">
                        </td>

                        <td style="background-color: #00a3c8;">
                            <h2 style="margin: 0; color: #fff;">生化诊断试剂</h2>
                            <div style="width: 50px;border-top: 1px solid #fff;margin-top: 10px;"></div>
                            <p style="color: #fff;">体外诊断试剂是指按医疗器械管理的体外诊断试剂，包括可单独使用或与仪器、器具、设备或系统组合使用。</p>
                            <div
                                style="width: 100px;height: 40px;border:2px solid #fff;text-align: center;line-height: 40px;color: #fff;">
                                查看更多 +</div>
                        </td>
                        <td id="GD" style="background-color: #5fbb5d;">
                            <div id="bbb"></div>
                            <div id="www">
                                <div><button>查看更多</button></div>
                            </div>
                        </td>
                        <td style="padding: 0;">
                            <img src="./imgs/C350.png" alt="">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="about-us-box">
        <div class="title">
            <h2>关于我们</h2>
            <h6>ABOUTUS</h6>
            <img src="./imgs/fgx.png" alt="">
        </div>
        <div id="about-us">
            <div class="about-us-img">
                <div class="img-border">
                    <div class="img-bg"></div>
                </div>
                <div class="img-border">
                    <div class="img-bg"></div>
                </div>
                <h2 style="text-align:right;line-height: 25px;">经营理念</h2>
                <h5 style="text-align:right; color: #aaa;line-height: 25px;">BUSINESS PHIL OSOPHY</h5>
                <p style="font-size: 14px; line-height: 25px;">
                    &emsp;&emsp;公司发展定位：集体外诊断试剂、医疗设备及生物制品研发、生产、销售、物流配送于一体的综合型医疗器械生产经营企业。</p>
                <p style="font-size: 14px;line-height: 25px;">&emsp;&emsp;公司经营理念：专注、专业、创新、协作<br>
                    &emsp;&emsp;企业宗旨：客户的需求就是伊川人永远工作的目标<br>
                    &emsp;&emsp;企业文化：诚实、诚信、重礼</p>
            </div>
            <div class="divider-line">
                <div></div>
            </div>
            <div class="about-us-info">
                <div class="quan">
                    <img src="./imgs/quan111.png" alt="">
                    <div></div>
                </div>
                <div>
                    <h2 style="height: 15px;"> </h2>
                    <h2 style="line-height: 25px;">广州伊川生物科技有限公司</h2>
                    <h6 style="line-height: 25px;">NTRODUCTION</h6>
                    <p style="font-size: 14px;line-height: 25px;">
                        &emsp;&emsp;公司成立于2014年5月。公司位于风景秀美的广州科学城开源大道188号，建设有独立的办公、研发和生产中心，拥有2100㎡国际标准的体外诊断试剂生产厂房和一流的医疗设备生产流水线，已获得ISO13485、ISO9001质量体系认证。
                    </p>
                    <div
                        style="width: 100px;height: 40px;border:2px solid #fff;text-align: center;line-height: 40px;color: #fff; background-color: #5fbb5d; border-radius: 10px; margin: 10px 0;">
                        查看更多 +</div>
                    <div style="width: 469px;height: 272px;border: 1px solid #aaa;padding: 3px;">
                        <div
                            style="background-image: url('./imgs/IMG_5002[2].jpg');height: 100%;background-size: 100%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div style="width: 100%; height: 800px;"><img style="width: 100%; height: 100%;" src="./imgs/1.png" alt=""></div> -->
    <div class="feek-back-box">
        <div class="feek-back">
            <div class="feek-back-img"></div>
            <div class="forms">
                <div>
                    <h3 style="line-height: 50px;border-bottom: 5px double #fff;width: 50%;">加盟合作 / FEEKBACK</h3>
                </div>
                <table style="width: 620px;height: 234px;">
                    <tr>
                        <td>
                            <p style="font-size: 12px;">你的姓名</p>
                            <input style="width: 280px;height: 40px;" type="text">
                        </td>
                        <td>
                            <p style="font-size: 12px;">联系电话</p>
                            <input style="width: 280px;height: 40px;" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p style="font-size: 12px;">你的姓名</p>
                            <input style="width: 280px;height: 40px;" type="text">
                        </td>
                        <td>
                            <p style="font-size: 12px;">联系电话</p>
                            <input style="width: 280px;height: 40px;" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td id="green-botton" colspan="2">提交</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="news-box" class="title">
        <h2>关于我们</h2>
        <h6>ABOUTUS</h6>
        <img src="./imgs/fgx.png" alt="">
        <div class="news">
            <div><img src="./imgs/4906.jpg" alt="">
                <p>年会 | "磨炼 聚变感恩分享"....</p>
                <p>2020-01-06</p>
            </div>
            <div><img src="./imgs/4906.jpg" alt="">
                <p>年会 | "磨炼 聚变感恩分享"....</p>
                <p>2020-01-06</p>
            </div>
            <div><img src="./imgs/4906.jpg" alt="">
                <p>年会 | "磨炼 聚变感恩分享"....</p>
                <p>2020-01-06</p>
            </div>
        </div>
        <div
            style="width: 100px;height: 40px;border:2px solid #fff;text-align: center;line-height: 40px;color: #fff; background-color: #5fbb5d; border-radius: 10px; margin: 100px auto 30px auto;">
            查看更多 +</div>
    </div>
    <div id="footer-content">
        <div class="bottom-box">
            <div class="bottom">我们招的不仅仅是代理商，更是事业合伙人！</div>
            <div class="bottom">招商电话：189-2220-8958</div>
            <div class="bottom" style="border-radius: 15px; background-color: #5fbb5d;border: 1px solid white;">加盟合作</div>
        </div>
        <div class="img-box">
            <div class="img">
                <img src="./imgs/2.jpg" alt="">
            </div>
            <div style="color: #aaa; margin-top: 10px;">Copyright ③ 2018-2019,广州伊川生物科技有限公司,All rights resesved</div>
        </div>           
</body>
<script>
    var imgNames = ["1c53.jpg", "9lwn.jpg", "wvtm.jpg", "p9dh.jpg"];
    var currentIndex = 0;
    var aniNames = ["slideDown", "slideFade", "slideUp", "slideFade"];
    function changeImage() {
        // 随机生成动画 
        var aniName = aniNames[currentIndex];
        // 切换图片
        document.querySelectorAll(".item").forEach(function (item, index) {
            item.style.backgroundImage = "url(./imgs/" + imgNames[currentIndex] + ")";
            item.className = "item " + aniName;
        });
        currentIndex++;
        if (currentIndex >= 4) currentIndex = 0;

        setTimeout(function () {
            changeImage();
        }, Math.random() * 3000 + 3000);
    }
    changeImage();

</script>

</html>